<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>经验值</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<link rel="stylesheet" type="text/css" href="../../css/vant.css" />

	<!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
	<!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		input {
			outline: none;
		}

		.task_banner div {
			position: relative;
		}

		.task_item_active:after {
			content: '';
			position: absolute;
			left: 40%;
			top: auto;
			bottom: 0;
			right: auto;
			height: 3px;
			width: 20%;
			border-radius: 8px;
			background-color: #ffffff;
		}
	</style>
</head>

<body style="background:#F7F4F2">
  <div id="blank" class="header" v-cloak style="background:#F95656;color:#ffffff">
    <div v-back.tapmode class="getback"></div>
    <div class="title">任务管理</div>
  </div>
  <div id="app" v-cloak class="container" style="padding-top:60px">
	  <div class="task_banner">
		  <div class="task_item" :class="{'task_item_active':active_index==1}" v-myclick="[1,changestatus]">领取任务</div>
		  <div class="task_item" :class="{'task_item_active':active_index==2}" v-myclick="[2,changestatus]">我的任务</div>
		  <div class="task_item" :class="{'task_item_active':active_index==3}" v-myclick="[3,changestatus]">历史任务</div>
	  </div>

	  <div class="task_container" v-show="active_index == 1" style="padding-bottom: 20px">
		  <div class="task_content" v-for="(list, index) in receive_list" :key="index" v-bind:style="getBg(list.level_task_bg)">
			  <div class="content_left">
				  <div class="left_content">
					  <span style="font-size:14px" >{{list.taskName}}</span>
					  <span>拥有{{list.havaCount}}个该等级任务</span>
				  </div>
				  <div class="left_content" style="margin-bottom: 10px;">
					  <p>• 点赞{{list.where1}}次</p>
					  <p>• 查看商品{{list.where2}}次</p>
				  </div>
				  <div class="left_content" style="margin-bottom: 10px;">
					  <!--.toFixed(2)-->
					  <span style="font-size:14px">次产：{{list.everyNum.toFixed(2)}}次</span>
					  <span>有效期：{{list.taskValidityDay}}天</span>
				  </div>
				  <div class="left_content left_content_title">
					  <span style="font-size:12px;font-weight: bold;">任务奖励:</span>
					  <span>
						  <span style="vertical-align: middle">{{list.totalNum}}</span>
						  <img style="vertical-align:middle;width:14px" v-src="'../../image/diamonds_1_white.png'">
						  +
						  <span style="vertical-align: middle">{{list.activeValue}}活跃度</span>
					  </span>
				  </div>
			  </div>
			  <div class="content_right">
				  <div style="width: 100%;">
					  <div style="width: 100%;font-size: 12px;"><span style="display: inline-block;vertical-align: middle;margin-right: 2px">打赏礼物×{{list.charmValue}}</span><span class="reward">{{list.myCharmValue}}/{{list.charmValue}}</span></div>
					  <div class="content_right_bottom" v-myclick="[list.taskId,receive]" v-show="list.taskLevel != 1">
						  {{list.needResource}}<img v-src="'../../image/diamonds_1_slices.png'" style="width:14px;vertical-align: middle;">
						  <span style="vertical-align: middle">领取</span>
					  </div>
				  </div>
			  </div>
			  <div style="clear:both"></div>
		  </div>
		  <div v-show="receive_list == ''" style="text-align:center;margin-top:50px">
			  <img src="../../image/task_empty.png" style="margin:0 auto;width:30%">
			  <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">你还没有历史任务</div>
		  </div>
	  </div>
	  <div v-show="active_index == 2" style="padding-bottom: 20px">
		  <div class="task_content" v-for="(list, index) in mytask_list" :key="index"  v-bind:style="getBg(list.level_task_bg)">
			  <div class="content_left">
				  <div class="left_content">
					  <span style="font-size:14px;margin-right: 0px">{{list.taskName}}</span>
					  <span>{{list.endTimeStr}} 到期</span>
				  </div>
				  <div class="left_content" style="margin-bottom: 10px;">
					  <p>• 点赞{{list.where1}}次</p>
					  <p>• 查看商品{{list.where2}}次</p>
				  </div>
				  <div class="left_content" style="margin-bottom: 10px;">
					  <span style="font-size:14px;">剩余次产：{{list.surplusNum}}次</span>
				  </div>
				  <div class="left_content left_content_title" >
					  <span style="font-size:12px;font-weight: bold;">任务奖励:</span>
					  <span>
					  <span style="vertical-align: middle">{{list.totalNum}}</span>
					  <img style="vertical-align:middle;width:14px" v-src="'../../image/diamonds_1_white.png'">
					  +
					  <span style="vertical-align: middle">{{list.activeValue}}活跃度</span>
				  </span>
				  </div>
			  </div>
			  <div class="content_right_img" style="margin-top: 12px;margin-right: 12px;">
				  <img style="width: 100%;" v-src="'../../image/conduct_slices.png'"/>
			  </div>
			  <div class="content_right" style="margin-top: 10px;">
				  <div style="width: 100%;">
					  <div style="width: 100%;font-size: 12px;margin-bottom: 15px">次奖钻石：{{list.everyNum}}</div>
					  <div style="font-size: 15px;font-weight: bold">已获钻石：{{list.alreadyNum}}</div>
				  </div>
			  </div>

			  <div style="clear:both"></div>
		  </div>
		  <div v-show="mytask_list == ''" style="text-align:center;margin-top:50px">
			  <img src="../../image/task_empty.png" style="margin:0 auto;width:30%">
			  <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">你还没有任务</div>
		  </div>
	  </div>
	  <div v-show="active_index == 3" style="padding-bottom: 20px">
		  <div class="task_content" v-for="(list, index) in history_list" :key="index"   v-bind:style="getBg(list.level_task_bg)">
			  <div class="content_left">
				  <div class="left_content">
					  <span style="font-size:14px;margin-right: 0px">{{list.taskName}}</span>
					  <span>{{list.endTimeStr}} 到期</span>
				  </div>
				  <div class="left_content" style="margin-bottom: 10px;">
					  <p>• 点赞{{list.where1}}次</p>
					  <p>• 查看商品{{list.where2}}次</p>
				  </div>
				  <div class="left_content" style="margin-bottom: 10px;">
					  <span style="font-size:14px;">剩余次产：{{list.surplusNum}}次</span>
				  </div>
				  <div class="left_content left_content_title" >
					  <span style="font-size:12px;font-weight: bold;">任务奖励:</span>
					  <span>
						  <span style="vertical-align: middle">{{list.totalNum}}</span>
						  <img style="vertical-align:middle;width:14px" v-src="'../../image/diamonds_1_white.png'">
						  +
						  <span style="vertical-align: middle">{{list.activeValue}}活跃度</span>
					  </span>
				  </div>
			  </div>
			  <div class="content_right_img" style="margin-top: 12px;margin-right: 12px;">
				  <img style="width: 100%;" v-show="list.currentState == 2" v-src="'../../image/complete_slices.png'"/>
				  <img style="width: 100%;" v-show="list.currentState == 3" v-src="'../../image/overdue_slices.png'"/>
			  </div>
			  <div class="content_right" style="margin-top: 10px;">
				  <div style="width: 100%;">
					  <div style="font-size: 15px;font-weight: bold">已获钻石：{{list.alreadyNum}}</div>
				  </div>
			  </div>
			  <div style="clear:both"></div>
		  </div>
		  <div v-show="history_list == ''" style="text-align:center;margin-top:50px">
			  <img src="../../image/task_empty.png" style="margin:0 auto;width:30%">
			  <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">你还没有历史任务</div>
		  </div>
	  </div>

  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
	var vm,
		wx,
		receive_list,
		mytask_list,
		history_list,
	apiready = function () {
		setBSImg();
		new Vue({
			el: '#blank'
		})
		wx = api.require('wx');
		// setBSImg();
		showProgress();
		var data = {
			wxOpenId:getPrefs('openid'),
			token:getPrefs('token'),
		};
		var callback  = function(ret){
			receive_list = ret.content;
			for(var i=0;i<receive_list.length;i++){
				receive_list[i].level_task_bg ="../../image/"+getMemberStyle(receive_list[i].taskLevel).level_task_bg;
			}
			initApp();
			console.log(JSON.stringify(receive_list))
		};
		pinet.post(APIURLP+'/play/task/queryMemberReceiveTaskList', data, callback);

		api.parseTapmode();
	};

	function initApp() {
		// var isBigImg = Vue.BSImg == 'big';
		vm = new Vue({
			el: '#app',
			data: {
				show: false,
				modal:true,
				list:true,
				fff:false,
				active_index:1,
				receive_list:receive_list,
				mytask_list:mytask_list,
				history_list:history_list,
			},
			computed: {

			},
			methods: {
				ddd:function(){
					this.show=true;
				},
				receive:function(value){
					var data = {
						wxOpenId:getPrefs('openid'),
						token:getPrefs('token'),
						taskId:value,
					};
					var callback=function(ret){
						api.toast({
							msg: '领取成功',
							duration: 2000,
							location: 'middle'
						});

						console.log(JSON.stringify(ret))

					};
					pinet.post(APIURLP+'/play/task/exeReceiveTask', data,callback);
				},
				showmodal:function(){
					this.modal = !this.modal
				},
				changestatus:function(status){
					this.active_index = status;
					if(status==1){
						var data = {
							wxOpenId:getPrefs('openid'),
							token:getPrefs('token'),
						};
						var callback  = function(ret){
							vm.receive_list = ret.content;
							if(vm.receive_list == undefined){
							}else{
								for(var i=0;i<vm.receive_list.length;i++){
									vm.receive_list[i].level_task_bg ="../../image/"+getMemberStyle(vm.receive_list[i].taskLevel).level_task_bg;
								}
							}
							console.log(JSON.stringify(vm.receive_list))
						};
						pinet.post(APIURLP+'/play/task/queryMemberReceiveTaskList', data, callback);
					}
					if(status==2){
						var data = {
							wxOpenId:getPrefs('openid'),
							token:getPrefs('token'),
						};
						var callback  = function(ret){
							vm.mytask_list = ret.content;
							if(vm.mytask_list == undefined){
							}else{
								for(var i=0;i<vm.mytask_list.length;i++){
									vm.mytask_list[i].level_task_bg ="../../image/"+getMemberStyle(vm.mytask_list[i].taskLevel).level_task_bg;
								}
							}
							console.log(JSON.stringify(vm.mytask_list))
						};
						pinet.post(APIURLP+'/play/task/userHavaTask', data, callback);
					}
					if(status==3){
						var data = {
							wxOpenId:getPrefs('openid'),
							token:getPrefs('token'),
						};
						var callback  = function(ret){
							vm.history_list = ret.content;
							if(vm.history_list == '' ){
								console.log(JSON.stringify(vm.history_list))
							}else {
								for(var i=0;i<vm.history_list.length;i++){
									vm.history_list[i].level_task_bg ="../../image/"+getMemberStyle(vm.history_list[i].taskLevel).level_task_bg;
								}
							}
							console.log(JSON.stringify(vm.history_list))
						};
						pinet.post(APIURLP+'/play/task/userTaskHistory', data, callback);
					}
				},
				getBg: function (url) {
					return {
						backgroundImage:'url(' + url +')'
					};
				}
			},

		})
	}

</script>

</html>
